

/* 白色模块 */
.div_a_white {
    background-color: #fff;
    border: 1px solid #ddd;

    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.div_a_white:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.div_a_white:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

/* 蓝色模块 */
.div_a_blue {
    background-color: #2196f3;
    border: 1px solid #0d8bf1;
    color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.div_a_blue:hover {
    background-color: #0d8bf1;
    border: 1px solid #0d8bf1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.div_a_blue:active {
    background-color: #0d8bf1;
    border: 1px solid #0d8bf1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

/* 绿色模块 */
.div_a_green {
    background-color: #4caf50;
    border: 1px solid #3a913f;
    color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.div_a_green:hover {
    background-color: #3a913f;
    border: 1px solid #3a913f;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.div_a_green:active {
    background-color: #3a913f;
    border: 1px solid #3a913f;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}
.div_a_blur_black {
    background-color: rgba(0, 0, 0, 0.5); /* 使用半透明黑色背景 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    padding: 20px; /* 设置内边距 */
    transition: all 0.3s ease; /* 添加过渡效果 */
}
.div_a_blur_black_notActive{
    background-color: rgba(0, 0, 0, 0.5); /* 使用半透明黑色背景 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    padding: 20px; /* 设置内边距 */
    transition: all 0.3s ease; /* 添加过渡效果 */
}

.div_a_blur_black:hover {
    transform: scale(1.05); /* 鼠标悬停时放大 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 鼠标悬停时增加阴影效果 */
}

.div_a_blur_black:active {
    transform: scale(0.95); /* 鼠标点击时缩小 */
}

.div_a_blur {
    background-color: rgba(255, 255, 255, 0.5); /* 背景颜色设置为半透明白色 */
    backdrop-filter: blur(8px); /* 使用模糊滤镜，值可以根据需要调整 */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.div_a_blur_notActive {
    background-color: rgba(255, 255, 255, 0.5); /* 背景颜色设置为半透明白色 */
    backdrop-filter: blur(8px); /* 使用模糊滤镜，值可以根据需要调整 */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.div_a_blur:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.div_a_blur:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

